<template>
    <div>
        <div class="user-info-container" ref="userInfoContainer">
            <!-- 用户头像触发按钮 -->
            <div @click.stop="toggleUserPanel" class="avatar-trigger">
                <img :src="userImg" alt="用户头像" class="user_img">
            </div>

            <!-- 用户信息面板 -->
            <div v-show="showUserPanel" class="user-panel">
                <!-- 顶部用户信息 -->
                <div class="user-header">
                    <div class="user-header_img">
                        <img :src="userImg" alt="用户头像" style="width: 1.77vw; height: 1.77vw;">
                    </div>
                    <div>
                        <div class="userbox">
                            <div class="userNmae">{{ userInfo.name }}</div>
                            <div class="userLine"></div>
                            <div class="userIntro">{{ userInfo.department }}</div>
                        </div>
                        <div style="margin-top: 1vw;">
                            <span class="number">账号：{{ userInfo.account }}</span>
                            <span style="margin-left: 0.72vw;">
                                <img src="../../../assets/images/new_img/复制2.png" alt="" @click="copyAccount"
                                    class="account-item" v-show="!isCopied">
                                <img src="../../../assets/images/new_img/已复制.png" alt="" class="account-item"
                                    v-show="isCopied">
                            </span>


                        </div>

                    </div>
                </div>
                <!-- 数据统计 -->
                <div class="user-stats">
                    <div v-for="(stat, index) in userStats" :key="index" class="stat-item"
                        @click="handleStatistics(stat.key)">
                        <div class="stat-value">{{ stat.value }}</div>
                        <div class="stat-label">{{ stat.label }}</div>
                    </div>
                </div>

                <!-- 功能菜单 -->
                <div>
                    <div v-for="(item, index) in menuItems" :key="index" class="menu_item"
                        @mouseenter="handleHover(index, true)" @mouseleave="handleHover(index, false)"
                        @click="handleMenuUser(item.action)">
                        <div>
                            <img :src="item.isHover ? iconEnum[item.type].hover : iconEnum[item.type].default" :style="{
                                width: `${item.iconSize.width}vw`,
                                height: `${item.iconSize.height}vw`,
                                position: 'relative',
                                top: '0.2vw'
                            }" />
                        </div>
                        <div :style="{
                            marginLeft: '0.52vw',
                            fontSize: '0.83vw',
                            color: item.isHover ? '#d6000e' : 'var(--color-text)'
                        }">
                            {{ item.label }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { watch, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { replaceLast } from '@/utils'
// import logoUrl from '@/assets/images/new_img/Logo.png'
import { EllipsisOutlined, SearchOutlined, CloseOutlined } from '@ant-design/icons-vue';
import Img_1 from '../../../assets/images/new_img/下载2.png'
import Img_2 from '../../../assets/images/new_img/眼睛.png'
import Img_3 from '../../../assets/images/new_img/设置.png'
import Img_4 from '../../../assets/images/new_img/退出账号.png'
// hover效果图标
import Img_1hover from '../../../assets/images/new_img/下载2hover.png'
import Img_2hover from '../../../assets/images/new_img/眼睛hover.png'
import Img_3hover from '../../../assets/images/new_img/设置hover.png'
import Img_4hover from '../../../assets/images/new_img/退出账号hover.png'

import userImg from "../../../assets/images/local_img/userInfo.jpg"



// import { loginIn } from 'api'

const router = useRouter()
const route = useRoute()
const searchText = ref('')
const showHistory = ref(false)
const searchContainer = ref(null)
// 用户头像
const showUserPanel = ref(false);
const userInfoContainer = ref(null);

// 切换面板显示状态
const toggleUserPanel = () => {
    showUserPanel.value = !showUserPanel.value;
};

// 点击外部关闭面板
const handleClickUserOutside = (event) => {
    if (userInfoContainer.value && !userInfoContainer.value.contains(event.target)) {
        showUserPanel.value = false;
    }
};

// 添加全局点击事件监听
onMounted(() => {
    document.addEventListener('click', handleClickUserOutside);
});

// 移除事件监听
onUnmounted(() => {
    document.removeEventListener('click', handleClickUserOutside);
});



// 用户信息数据
const userInfo = ref({
    name: '幸运的李李',
    department: '重庆项目 设计部 设计师',
    account: '02385643230'
});

// 统计数据
const userStats = ref([
    { label: '作品', value: 153, key: 'works', },
    { label: '获赞', value: 287, key: 'notifications', },
    { label: '消息', value: 32, key: 'notifications', },
    { label: '关注', value: 16559, key: 'following', },
    { label: '收藏', value: 569, key: 'collections', }
]);


// 菜单项数据
const iconEnum = ref({
    1: { default: Img_1, hover: Img_1hover },
    2: { default: Img_2, hover: Img_2hover },
    3: { default: Img_3, hover: Img_3hover },
    4: { default: Img_4, hover: Img_4hover }
});

const menuItems = ref([
    { label: '下载授权记录', action: 'download', type: 1, iconSize: { width: 0.9, height: 0.9 }, isHover: false },
    { label: '浏览记录', action: 'browse', type: 2, iconSize: { width: 0.9, height: 0.9 }, isHover: false },
    { label: '账号设置', action: 'settings', type: 3, iconSize: { width: 0.9, height: 0.9 }, isHover: false },
    { label: '退出账号', action: 'logout', type: 4, iconSize: { width: 0.89, height: 0.89 }, isHover: false }
]);
// 处理 hover 状态
const handleHover = (index, isEnter) => {
    menuItems.value[index].isHover = isEnter;
};


// 用于控制是否显示"已复制"提示
const isCopied = ref(false);

// 复制操作
const copyAccount = () => {
    const account = userInfo.value.account;


    const tempInput = document.createElement('input');
    tempInput.value = account;
    document.body.appendChild(tempInput);


    tempInput.select();
    document.execCommand('copy');

    // 删除临时输入框
    document.body.removeChild(tempInput);

    // 显示复制成功提示
    isCopied.value = true;

    // 3秒后隐藏提示
    setTimeout(() => {
        isCopied.value = false;
    }, 3000);
};




const handleStatistics = (key) => {
    console.log(key);

    router.push({
        path: '/IndividualCenter/' + key
    })

}



// 菜单点击处理
const handleMenuUser = (action) => {
    console.log('执行操作:', action);
    if (action === 'logout') {
        // 退出登录逻辑
        showUserPanel.value = false;
    }
};
</script>

<style lang="less" scoped>
/* 用户头部信息 */
.user_img {
    width: 1.77vw;
    height: 1.77vw;
    margin-left: 1.4vw;
    border-radius: 50%;
}


/* 触发按钮样式 */
.avatar-trigger {
    cursor: pointer;
    display: inline-block;
}



.user-info-container {
    position: relative;
    display: inline-block;
}


/* 用户面板 */

.user-panel {
    position: absolute;
    top: 3.3vw;
    right: 0;
    background: var(--color-bg-20);
    border-radius: 0.41vw;
    padding: 1.04vw;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
 
}


.user-header {
    display: flex;
    align-items: center;
    margin-left: 1.04vw;
    color: rgb(51, 51, 51);
    // justify-content: space-around;

    .user-header_img {
        margin-right: 1.56vw;
        >img {
            width: 1.82vw;
            height: 1.82vw;
            border-radius: 50%;
        }
    }

    .userbox {
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .userNmae {
            width: auto;
            height: 1.04vw;
            color: var(--color-text);
            font-size: 0.93vw;
            text-align: left;
            white-space: nowrap;


        }

        .userLine {
            height: 0.72vw;
            width: 0.05vw;
            margin: 0px 0.41vw;
            border: 1px solid var(--color-text);
            align-self: flex-end;

        }

        .userIntro {
            width: auto;
            height: 0.72vw;
            line-height:0.72vw;
            font-size: var(--text-14);
            white-space: nowrap;
            align-self: flex-end;
            color: var(--color-text);

        }
    }



    .number {
        font-size: 0.72vw;
        color: #666666;
        margin-top: 10vw;
    }

    .account-item {
        width: 0.625vw;
        height: 0.625vw;
    }




}


/* 统计数据 */
.user-stats {

    display: flex;
    justify-content: space-around;
    padding: 1vw 0;
    border-bottom: 2px solid var(--border-b);
    margin-bottom: 0.78vw;

    .stat-item {
        text-align: center;
        transition: color 0.3s;

        &:hover {
            color: #d6000e;

            .stat-value,
            .stat-label {
                color: inherit;
            }
        }

        .stat-value {
            color: var(--color-text);
            font-size: 0.93vw;
        }

        .stat-label {
            color: var(--color-text-6);
            font-size: 0.72vw;
        }
    }




}

.menu_item {
    width: 90%;
    // border: 1px solid red;
    margin: 0 auto;
    text-align: center;
    display: flex;
    align-items: center;
    padding: 0.52vw 0.83vw 0.52vw 0px;


}
</style>